<template>
    <Card>
        <div @keydown.enter="queryData(true)">
            <Form ref="queryForm" :model="queryParams" :label-width="90" :inline="false">
                <Row :gutter="8">
                    <Col span="5">
                        <FormItem label="角色名称" prop="name">
                            <Input v-model="queryParams.name" placeholder="模糊匹配" clearable></Input>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem label="创建时间-开始" prop="createStart">
                            <DatePicker v-model="queryParams.createStart" type="date" format="yyyy-MM-dd" placeholder="选择时间"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem label="创建时间-结束" prop="createEnd">
                            <DatePicker v-model="queryParams.createEnd" type="date" format="yyyy-MM-dd" placeholder="选择时间"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <Button type="primary" style="margin-left: 8px" @click="queryData(true)">查询</Button>
                        <Button type="ghost" style="margin-left: 5px" @click="queryReset">重置</Button>
                        <Button type="primary" style="margin-left: 5px" @click="showAddModal">新增</Button>
                    </Col>
                </Row>
            </Form>
        </div>

        <Table :columns="tableColumns" :data="tableData.list" :loading="tableLoading" stripe border />
        <div style="margin: 10px;overflow: hidden;height: 80px;">
            <div style="float: right;">
                <Page 
                    show-total 
                    show-elevator 
                    show-sizer
                    :page-size-opts="[10, 20, 50, 100]"
                    :total="tableData.total" 
                    :current="tableData.pageNum" 
                    :page-size="tableData.pageSize" 
                    placement="top" 
                    @on-change="pageChange"
                    @on-page-size-change="pageSizeChange"
                />
            </div>
        </div>

        <Modal title="编辑角色信息" :mask-closable="false" v-model="editModal.show">
            <Form ref="editForm" :model="editParams" :label-width="70" :inline="false" :rules="editFormRuleValidate">
                <Row>
                    <FormItem label="角色名称" prop="name">
                        <Input v-model="editParams.name" :readonly="true"></Input>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="说明" prop="description">
                        <Input v-model="editParams.description" type="textarea" :rows="3" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="text" @click="closeEditModal">取消</Button>
                <Button type="primary" :loading="editModal.loading" @click="updateRowSubmit">确定</Button>
            </div>
        </Modal>

        <Modal title="新增角色" :mask-closable="false" v-model="addModal.show">
            <Form ref="addForm" :model="addParams" :label-width="90" :inline="false" :rules="addFormRuleValidate">
                <Row>
                    <FormItem label="角色名称" prop="name">
                        <Input v-model="addParams.name" placeholder="建议格式：系统名-角色名"></Input>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="说明" prop="description">
                        <Input v-model="addParams.description" type="textarea" :rows="3" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="text" @click="closeAddModal">取消</Button>
                <Button type="primary" :loading="addModal.loading" @click="addRowSubmit">确定</Button>
            </div>
        </Modal>
    </Card>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import { getRole } from '../../api/ServerApi';

export default {
    data () {
        return {
            tableColumns: [
                // { title: '#', type: 'index', width: 60, align: 'center' },
                { title: '角色名称', key: 'name', width: 260 },
                { title: '说明', key: 'description', render: (h, { row }) => {
                    const style = {
                        'display': 'inline-block',
                        'width': '600px',
                        'overflow': 'hidden',
                        'white-space': 'nowrap',
                        'text-overflow': 'ellipsis'
                    };
                    return h('span', { style: style, attrs: { title: row.description } }, row.description); 
                }},
                { title: '创建时间', key: 'createAt', width: 150 },
                { title: '更新时间', key: 'updateAt', width: 150 },
                { title: '操作', key: '操作', align: 'center', width: 150,  render: (h, { row }) => {
                    return h('span', [
                        h('a', { on: { click: () => this.showEditModal(row) } }, '编辑'),
                        h('span', { style: {margin: '0 3px', color: '#e8e8e8' } }, '|'),
                        h('Poptip', {
                            props: { confirm: true, title: '您确认删除当前数据吗？', okText: '删除', width: 200, placement: 'left' },
                            on: { 'on-ok': () => this.deleteRow(row) }
                        }, [h('a', '删除')]),
                    ]); 
                }},
            ],
            editFormRuleValidate: {

            },
            addFormRuleValidate: {
                name: [ { required: true, trigger: 'blur', whitespace: true, validator: (rule, value, callback) => {
                    this.addParams.name = (this.addParams.name !== null ? this.addParams.name : '');
                    this.addParams.name = String.trim(this.addParams.name);
                    if (!this.addParams.name || this.addParams.name.length === 0) {
                        callback(new Error("角色名称必填"));
                        return;
                    }
                    getRole(this.addParams.name).then(data => {
                        if (data && data.name) {
                            callback(new Error("当前角色名称已经被使用"));
                        } else {
                            callback();
                        }
                    }).catch(error => callback(new Error("校验角色名称异常")));
                } } ],
            }
        };
    },
    mounted() {
        if (!this.tableData.navigatepageNums){
            this.queryData();
        }
    },
    computed: {
        ...mapState('RolesList', ['tableLoading', 'tableData', 'queryParams', 'editModal', 'editParams', 'addModal', 'addParams'])
    },
    methods: {
        ...mapActions('RolesList', ['queryData', 'deleteRow', 'updateRow', 'addRow']),
        // ...mapMutations('CodeRepository', ['']),
        queryReset() {
            this.$refs.queryForm.resetFields();
        },
        pageChange(pageNo) {
            if (this.queryParams.pageNo !== pageNo){
                this.queryParams.pageNo = pageNo;
                this.queryData();
            }
        },
        pageSizeChange(pageSize) {
            if (this.queryParams.pageSize !== pageSize) {
                this.queryParams.pageNo = 1;
                this.queryParams.pageSize = pageSize;
                this.queryData();
            }
        },
        closeEditModal() {
            this.editModal.show = false;
        },
        showEditModal(row) {
            this.$refs.editForm.resetFields();
            this.editModal.show = true;
            this.editParams.name = row.name;
            this.editParams.description = row.description;
        },
        updateRowSubmit() {
            this.$refs.editForm.validate().then((flag) => {
                if (flag) {
                    this.updateRow();
                }
            });
        },
        closeAddModal() {
            this.addModal.show = false;
        },
        showAddModal() {
            this.$refs.addForm.resetFields();
            this.addModal.show = true;
        },
        addRowSubmit() {
            this.$refs.addForm.validate().then((flag) => {
                if (flag) {
                    this.addRow();
                }
            });
        }
    }
};
</script>
